<template>
    <l-layout class="l-tab-page" v-if="!lr_loadPage" >
        <l-panel>
            <template #toolLeft >
                <div class="l-panel--item" >
                    <el-input :placeholder="$t('please enter被委托人')" v-model="searchWord"  @keyup.enter.native="hanleSearch" size="mini" >
                        <el-button @click.native="hanleSearch" slot="append" icon="el-icon-search"></el-button>
                    </el-input>
                </div>
            </template>
            <template #toolRight >
                <l-tool-btns @click="handleAdd()">
                    <l-excel-btns></l-excel-btns>
                </l-tool-btns>
            </template>
            <l-table 
                :loading="tableLoading"
                :columns="columns" 
                :dataSource="tableData" 
                row-key="f_Id"
                :isPage="true"
                :pageTotal="tableTotal"
                :tablePage.sync="tableCurrentPage"

                @loadPageData="turnTablePage"
                >
                <template v-slot:f_BeginDate="scope" >
                    {{lr_dateFormat(scope.row.f_BeginDate,'yyyy-MM-dd')}}
                </template>
                 <template v-slot:f_EndDate="scope" >
                    {{lr_dateFormat(scope.row.f_EndDate,'yyyy-MM-dd')}}
                </template>
                <template v-slot:f_CreateDate="scope" >
                    {{lr_dateFormat(scope.row.f_CreateDate,'yyyy-MM-dd hh:mm')}}
                </template>
                <template v-slot:f_Type="scope" >
                    <el-tag v-if="scope.row.f_Type == 1" size="mini" type="warning">{{$t('发起')}}</el-tag>
                    <el-tag v-else size="mini" type="success">{{ $t('审核') }}</el-tag>
                </template>
                <template v-slot:f_EnabledMark="scope" >
                    <el-switch
                        :active-value="1"
                        :inactive-value="0"
                        v-model="scope.row.f_EnabledMark"
                        @change="handleEnableChange(scope.row)"
                        >
                    </el-switch>
                </template>
                <l-table-btns :btns="tableBtns" @click="lr_handleTableBtnClick" ></l-table-btns>
            </l-table>
        </l-panel>
        <l-dialog :title="$t(formTitle)"
                  :visible.sync="formVisible"
                  :height="480"
                  :width="880"
                  @ok="handleSave"
                  @close="handleCloseForm"
                  @opened="handleOpenedForm">
            <my-form ref="form" > 
            </my-form>
        </l-dialog>
    </l-layout>
</template>

<script>
const api = window.$api.workflow.delegate
import MyForm from './form'
export default {
  components: {
    MyForm
  },
  data () {
    return {
        lr_isPage:true,
        
        // 左侧树形
        classifysVisible:false,
        treeLoading:true,
        treeCategory:'',

        // 搜索
        searchWord:'',


        // 表格
        columns: [
            {label:'被委托人',prop:'f_ToUserName',width:'100'},
            {label:'开始时间',prop:'f_BeginDate',width:'100'},
            {label:'结束时间',prop:'f_EndDate',width:'100'},
            {label:'类型',prop:'f_Type',width:'64',align:'center'},
            {label:'状态',prop:'f_EnabledMark',width:'64',align:'center'},
            {label:'创建人',prop:'f_CreateUserName',width:'100'},
            {label:'创建时间',prop:'f_CreateDate',width:'140'},
            {label:'委托说明',prop:'f_Description',minWidth:'100'}
        ],
        tableBtns:[
            {prop:'Edit',label:'Edit',width:40},
            {prop:'Delete',label:'Delete',width:40},
        ],
        tableLoading:false,
        tableTotal:0,
        tablePageSize:50,
        tableCurrentPage:1,
        tableData: [],

        // 表单参数
        formVisible:false,
        formTitle:'',
        formEditRow:null,
        formEdit:false
    };
  },
  computed:{
  },
  mounted () {
      this.loadTablePage()
  },
  methods:{
    loadTablePage(isNotFirst){
        if(!isNotFirst){
            this.tableCurrentPage = 1;
        }
        this.tableLoading = true;
        let queryData = {
            rows:this.tablePageSize,
            page:this.tableCurrentPage,
            sidx:'F_CreateDate DESC',
            keyword:this.searchWord
        }
        api.getPage(queryData).then(res=>{
            const data = this.$deepClone(res.data.data);
            this.tableData = data.rows;
            this.tableTotal = data.records;

            this.tableLoading = false;

        }).catch(()=>{
            this.tableData = [];
            this.tableLoading = false;
        });
    },
    turnTablePage({rows}){
        this.tablePageSize = rows;
        this.loadTablePage(true);
    },
    
    // 搜索
    hanleSearch(){
        this.loadTablePage();
    },

    // 分类
    handleNodeClick(node) {
        this.treeCategory = node.id;
        this.tableCurrentPage = 1;
        this.loadTablePage();
    },
    handleSettingClick(){
        this.classifysVisible = true;
    },
    handleCloseClassifys(){
        this.treeLoading = true;
        this.$nextTick(()=>{
            this.treeLoading = false;
        });
    },

    // 表单
    handleAdd(){
        this.formEdit = false
        this.handleShowForm('Add委托')
    },
    handleEdit($index,row){
        this.formEdit = true
        this.formEditRow = row
        this.handleShowForm('Edit委托')
    },
    handleDelete($index,row){
        this.$confirm(this.$t('This operation will permanently delete the data. Do you want to continue?'), this.$t('Tips'), {
        confirmButtonText: this.$t('confirm'),
        cancelButtonText: this.$t('cancel'),
        type: 'warning'
        }).then(async () => {
            this.tableData.splice($index,1);
            this.tableTotal--;
            await api.remove(row.f_Id)
            this.$message({
                type: 'success',
                message: this.$t('Delete  success')
            })
        }).catch(() => {
            this.$message({
                type: 'info',
                message: this.$t('Delete has been canceled!')
            })
        })
    },
    handleEnableChange(row){
        api.updateState(row.f_Id,row.f_EnabledMark).then(()=> {
            this.$message({
                type: 'success',
                message: this.$t('更新成功!')
            });
        })
    },
    async handleSave(showLoading, hideLoading) {
        if (await this.$refs.form.validateForm()) {
            showLoading()
            const postData =await this.$refs.form.getForm()

            let res = ''
            if(this.formEdit){// Edit
                res = await this.$awaitWraper(api.update(this.formEditRow.f_Id,postData))
            }
            else{// Add
                res = await this.$awaitWraper(api.add(postData))
            }
            if(res){
                this.$message({
                    type: 'success',
                    message: this.$t('save success!')
                })
                this.loadTablePage()
                this.formVisible = false
            }

            hideLoading()
        }
    },


    handleShowForm(text) {
        this.formTitle = text;
        this.formVisible = true;
    },
    async handleOpenedForm(showLoading, hideLoading){
        if(this.formEdit){
            showLoading('Loading data...')
            const data =  await this.$awaitWraper(api.get(this.formEditRow.f_Id))
            if(data){
                this.$refs.form.setForm(data)
            }
            hideLoading()
        }
        else{
            this.$refs.form.openedForm()
        }
    },
    handleCloseForm(){
        this.$refs.form.resetForm()
    }
  }

}
</script>